*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    touch-action: none;
}

/*手机不可选中*/
body, canvas, div {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(1, 1, 1, 1);
}

body{
    max-width: 640px;
    margin:0 auto;
    padding: 0;
    background-color: #f8f8f8;
    font-family: Sans-Serif;
}

img{
    border:none
}

@-webkit-keyframes square-spin-x {
    12.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    37.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(30deg);
        transform: perspective(100px) rotateX(0deg) rotateY(30deg);
    }

    62.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    87.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(-30deg);
        transform: perspective(100px) rotateX(0deg) rotateY(-30deg);
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes square-spin-x {
    12.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    37.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(30deg);
        transform: perspective(100px) rotateX(0deg) rotateY(30deg);
    }

    62.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    87.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(-30deg);
        transform: perspective(100px) rotateX(0deg) rotateY(-30deg);
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }
}

@-webkit-keyframes square-spin-y {
    12.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    37.5% {
        -webkit-transform: perspective(100px) rotateX(30deg) rotateY(0deg);
        transform: perspective(100px) rotateX(30deg) rotateY(0deg);
    }

    62.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    87.5% {
        -webkit-transform: perspective(100px) rotateX(-30deg) rotateY(0deg);
        transform: perspective(100px) rotateX(-30deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes square-spin-y {
    12.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    37.5% {
        -webkit-transform: perspective(100px) rotateX(30deg) rotateY(0deg);
        transform: perspective(100px) rotateX(30deg) rotateY(0deg);
    }

    62.5% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }

    87.5% {
        -webkit-transform: perspective(100px) rotateX(-30deg) rotateY(0deg);
        transform: perspective(100px) rotateX(-30deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }
}

.square-spin-x{
    -webkit-animation: square-spin-x 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: square-spin-x 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
}

.square-spin-y{
    -webkit-animation: square-spin-y 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: square-spin-y 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
}

.linear-gradient {
    background: -webkit-linear-gradient(left, #ff3157, #f14598); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #ff3157, #f14598); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #ff3157, #f14598); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #ff3157, #f14598); /* 标准的语法 */
}

.linear-gradient-shade {
    background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.6)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); /* 标准的语法 */
}

#sway {
    margin: 0px; position: relative; overflow: hidden; width: 100%; height: 100%;
}

#swayCanvas {
    width: 100%; height: 100%; outline: none;
}

#guideContainer {
    width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; overflow: hidden
}

#loadingPhone {
    width: 42px; height: 60px;
}

#loadingTip {
    width: 200px; margin-left: 14px; font-size: 18px; font-weight: 400; color: #ffffff;
}

#topic {
    width: 100%; height: 150px; position: absolute; bottom: 0; left: 0;
}

.watermark {
    width: 101px; height: 55px; margin-top: 75px;
}

.user-info-panel {
    height: 80px; opacity: 0.8; padding-top: 20px; float: left; margin-top: 50px;
}

.show-id {
    font-size: 18px; line-height: 18px; color: #ffffff; font-weight: bold; margin-left: 24px;
}

.swing-title {
    height: 40px; font-size: 16px; overflow: hidden; color: #ffffff; margin-left: 24px; margin-top: 6px; margin-right: 20px; margin-bottom: 0; line-height: 20px;
}

.music {
    width: 36px; height: 36px; position: absolute; top: 14px; right: 14px; z-index: 101;
}

#sliderHorizontalContainer {
    width: 100%; height: 10px; position: absolute; bottom: 0; z-index: 103;
}

#sliderHorizontal {
    width: 100px; height: 8px; border-radius: 100px; background-color: #fbda09; position: absolute; top: 0; display: none;
}

#downloadProcessHorizontal {
    height: 10px; background-color: rgba(0, 0, 0, 0.35); position: absolute; bottom: 0;
}

#sliderVerticalContainer {
    height: 100%; width: 10px; position: absolute; left: 0; top: 0; z-index: 103;
}

#sliderVertical {
    width: 8px; height: 100px; border-radius: 100px; background-color: #fbda09; position: absolute; left: 2px; display: none;
}

#downloadProcessVertical {
    width: 10px; background-color: rgba(0, 0, 0, 0.35); position: absolute; left: 0;
}

.loop-container {
    width: 100px; height: 34px; position: absolute; bottom: 20px; left: 24px; z-index: 100;display: flex; align-items: center
}

#loop {
    font-size: 20px; color: #FFF; font-weight: bold; margin-left: 4px;
}

#download {
    opacity: 0; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 99
}

#downloadButton {
    width: 170px; height: 50px; border-radius: 10px; display: flex; justify-content: center;align-items: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.download-text {
    font-size: 18px; color: #FFF; font-weight: bold; margin-left: 8px;
}

#loadingContainer {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;z-index: 102; overflow: hidden;
}

#loadingFrame {
    width: 100%; -webkit-filter: blur(20px);
}

#loadingDiv {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center;
}

#loadingTip {
    font-size: 18px; font-weight: 300; color: #FFF; margin-top: 14px;
}

.loading-show-id {
    font-size: 18px; font-weight: bold; color: #ffcee0; margin-top: 10px;
}

#initCover {
    width: 2000px; height: 2000px; position: absolute; top: 0; left: 0; z-index: 1000;
}